<template>
  <div class="SLA-config">
    <div class="SLA-config-header">
      <span class="header-title">SLA</span>
      <div style="float: right;color: #008BEE">
        <i class="el-icon-plus"></i>
        <el-button  type="text" @click="addSLA">新增SLA</el-button>
      </div>
    </div>
    <div class="SLA-config-content">
      <div class="list-item" v-for="item in SLAList" :key="item.name">
        <div class="item-operate">
          <el-button  type="text" @click="editSLA(item)">编辑</el-button>
          <el-button  type="text" @click="copySLA(item)">复制</el-button>
          <el-button style="color: #FC6B5C" type="text" @click="delSLA(item)">删除</el-button>
          <el-switch
            style="margin-left:10px"
            v-model="item.isUse"
            size="mini"
            active-color="#2ED47A"
            @change="handleIsUseChange($event, item)"
            >
          </el-switch>
        </div>
        <div class="item-title">{{item.name}}</div>
        <div class="item-desc text-ellipsis">{{item.description}}</div>
      </div>
    </div>
    <editSLA ref="editsla" :smsTemplList="smsTemplList" :smsSignList="smsSignList" :modelId="modelId" :operateStatus="operateStatus" @refresh-list="handleRefreshList"></editSLA>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Ref, Prop } from 'vue-property-decorator'
import { commonAction } from '@/utils/common'
import editSLA from './editSLA.vue'
@Component({
  name: 'SLAConfig',
  components: {
    editSLA
  }
})
export default class extends Vue {
  @Prop({ default: () => [] }) private smsSignList
  @Prop({ default: () => [] }) private smsTemplList
  @Ref() private editsla!: editSLA
  [x: string]: any

  private SLAList = []

  private operateStatus: number = 0 // 0 编辑 1 新增 2 复制
  private modelId: string = this.$route.params.businessId
  private created () {
    this.getSLAList()
  }

  private addSLA () {
    this.operateStatus = 1
    this.$nextTick(() => {
      this.editsla.resetForm()
    })
  }

  private editSLA (val) {
    val.timeLimitedConfigList.forEach(item => {
      if (!item.timingRule.fieldSimple) {
        item.timingRule.fieldSimple = {
          businessId: '',
          fieldType: 'dateTime'
        }
      }
    })
    this.operateStatus = 0
    this.$nextTick(() => {
      this.editsla.setForm(val)
    })
  }

  private copySLA (val) {
    this.operateStatus = 2
    this.$nextTick(() => {
      this.editsla.setForm(val)
    })
  }

  private delSLA (val) {
    this.$confirm(`确定要删除${val.name}吗`, '提示', {
      type: 'warning'
    }).then(() => {
      commonAction({
        url: `/server-work/action/sla/config/delete/${val.id}`,
        method: 'GET'
      }).then(res => {
        if (res.success) {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        }
        this.getSLAList()
      })
    })
  }

  private getSLAList () {
    commonAction({
      url: '/server-work/action/sla/config/list',
      method: 'post',
      data: { modelId: this.modelId }
    }).then(res => {
      if (res.success) {
        this.SLAList = res.data.map(item => {
          item.isUse = item.status === 1
          return item
        })
      }
    })
  }

  private handleRefreshList () {
    this.getSLAList()
  }

  private handleIsUseChange ($event, val) {
    commonAction({
      url: '/server-work/action/sla/config/switch',
      method: 'post',
      data: { id: val.id, status: $event ? 1 : 0 }
    }).then(res => {
      if (res.success) {
        this.$message.success('修改成功!')
      }
    })
  }
}
</script>
<style lang="stylus" scoped>
.SLA-config
  .SLA-config-header
    height 20px
    margin 10px 0
    .header-title
      font-family 'PingFang SC'
      font-style normal
      font-weight 500
      font-size 14px
      line-height 20px
  .SLA-config-content
    .list-item
      font-family: 'PingFang SC';
      font-style: normal;
      font-weight: 400;
      font-size: 12px;
      line-height: 18px;
      border-bottom 1px solid #E7E9ED
      height 72px
      padding 16px 0
      .item-title
        color: #303753;
        margin-bottom: 3px
      .item-desc
        color: #767E91;
        max-width 800px
      .item-operate
        float right
        margin-top 5px
</style>
